<template>
<!-- @touchmove.prevent @scroll.prevent -->
    <div  class='mainpage'>
        <bottom-bar class='bottombar'></bottom-bar>
        <options class='options'></options>
         <question-panel ></question-panel>
        <progress-bar class='processbar'></progress-bar>
    </div>
</template>
<script>
import ProgressBar from './components/ProgressBar'
import QuestionPanel from './components/QuestionPanel'
import BottomBar from './components/BottomBar'
import Options from './components/Options'
    export default({
        name:'Main',
    data(){
       return {
    
       }
    },
    components:{
        ProgressBar,
        QuestionPanel,
        BottomBar,
        Options,
    }   
    })
</script>
<style lang="stylus" scoped>
.mainpage
    position : absolute
    background : white 
    width:100%;
    height: 100%;
    display: -webkit-flex
    display: flex
    flex-direction: column-reverse
    .processbar
        position absolute
        top 0px
    .bottombar
        width:100%
    .options
        width : 100%

</style>

